<template>
  <!-- 文章标题 -->
  <h1 class="font-bold text-3xl leading-snug">{{ title }}</h1>

  <!-- Meta 信息 -->
  <div
    class="flex flex-wrap justify-start items-center text-sm text-gray-500 dark:text-gray-400 mt-5 px-2 sm:px-0"
  >
    <div class="flex items-center mr-6">
      <ElAvatar
        class="mr-2"
        src="https://foruda.gitee.com/avatar/1728913561713775492/9131495_qinfeng_wei_1728913561.png"
        :size="22"
      />
      <span>忙里偷闲的sin</span>
    </div>
    <div class="flex items-center mr-6">
      <Icon name="time" width="17" height="17" class="mr-2 dark:text-white" />
      <span>{{ createTime }}</span>
    </div>

    <div class="flex items-center mr-6">
      <Icon name="words" width="12" height="12" class="mr-2 dark:text-white" />
      <span>{{ countMd }}字</span>
    </div>

    <div class="flex items-center mr-6">
      <Icon name="read" width="12" height="12" class="mr-2 dark:text-white" />
      <span>{{ readingMinutes }}分钟</span>
    </div>

    <div class="flex items-center mr-6">
      <Icon name="image" width="13" height="13" class="mr-2 dark:text-white" />
      <span>{{ imageCount }}</span>
    </div>

    <div class="flex items-center">
      <svg
        class="w-3 h-3 mr-2 dark:text-white"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 20 14"
      >
        <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
          <path d="M10 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
          <path d="M10 13c4.97 0 9-2.686 9-6s-4.03-6-9-6-9 2.686-9 6 4.03 6 9 6Z" />
        </g>
      </svg>
      <span>阅读量 {{ visitCount }}</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
defineProps<{
  title: string
  createTime: Date
  countMd: number
  readingMinutes: number
  imageCount: number
  visitCount: number
}>()
</script>
